<template>
  <div class="page">
    <div class="normal-client-main">
      <group>
      <x-input title="家长姓名" v-model="client.parent_name" placeholder="请输入家长姓名" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></x-input>
      <x-input title="手机号码" v-model="client.mobile_num" placeholder="输入手机号码" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></x-input>
      <x-address class="address" title="所在地址" v-model="client.address" placeholder="请选择地址" raw-value :list="addressData" value-text-align="right"></x-address>

      <div class="babayArea" v-for="(baby, index) in this.babies" v-if="index == 0"  :key="index">
        <x-input title="宝宝姓名" v-model="baby.baby_name" placeholder="输入宝宝姓名" placeholder-align="right" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" ></x-input>
        <selector direction="rtl" title="宝宝性别" v-model="baby.baby_sex" placeholder="输入宝宝性别"  :options="babyGenderOptions" placeholder-align="right"></selector>
        <datetime title="宝宝生日" v-model="baby.baby_birthday" placeholder="请选择宝宝生日" placeholder-align="left"></datetime>
      </div>

      <x-input title="所属行业" placeholder="请选择所属行业" :options="industryOptions" v-model="client.parent_industry" placeholder-align="right"></x-input>
      <selector direction="rtl" title="客户来源" placeholder="请选择客户来源" :options="clientSources" v-model="client.source_id" placeholder-align="right" ></selector>
      <selector direction="rtl" title="跟进状态" placeholder="请选择跟进状态" :options="customStatusOptions" v-model="client.custom_status" placeholder-align="right" ></selector>
      <selector direction="rtl" title="客户属性" placeholder="请选择客户属性" :options="customPropertyOptions" v-model="client.custom_property" placeholder-align="right" ></selector>
      <cell title="创建人" placeholder="输入创建人" novalidate :icon-type="iconType" v-model="client.creator" :show-clear="false" @on-blur="onBlur" placeholder-align="right"></cell>
      </group>

      <group v-for="(baby, index) in this.babies" v-if="index>0" title="新宝宝:" :key="index">
      <x-input title="宝宝姓名" v-model="baby.baby_name" placeholder="输入宝宝姓名" placeholder-align="right" novalidate :icon-type="iconType" :show-clear="false" @on-blur="onBlur" ></x-input>
      <selector direction="rtl" title="宝宝性别" v-model="baby.baby_sex" placeholder="输入宝宝性别"  :options="babyGenderOptions" placeholder-align="right"></selector>
      <datetime title="宝宝生日" v-model="baby.baby_birthday" placeholder="请选择宝宝生日" placeholder-align="left"></datetime>
      </group>

      <div class="btn-group">
      <span class="btn add-new-btn pull-left" @click="addBaby">+新增宝宝</span>
      <span class="btn save-btn pull-right" @click="saveClientInfo">保存</span>
      </div>
    </div>
    </div>
</template>

<script>
  import Vue from 'vue'
  import clientMenu from '../components/client-menu'
  import {XInput, Group, ChinaAddressData, XAddress, Selector, Datetime, Cell} from 'vux'
  import store from '../store';

  export default{
    data(){
      return {

        client:{
          "id": '',
          "site_id": null,
          "custom_type": "PT#",
          "uniacid": null,
          "open_id": null,
          "union_id": null,
          "nick_name": null,
          "sex": '0',
          "head_img_url": 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
          "subscribe_time": null,
          "remark": null,
          "province": null,
          "subscribe": null,
          "mobile_num": null,
          "parent_name": null,
          "city": '广州市',
          "district": "番禺区",
          "custom_status": "0",
          "custom_property": "YB#",
          "suid": null,
          "uid": null,
          "is_distribute": 1,
          "status": "OK##",
          "backup_mobile_num": null,
          "parent_type": null,
          "telephone": null,
          "parent_industry": null,
          "parent_job": null,
          "source": '0',
          "source_id": '0',
          "last_contact_time": null,
          "insert_time": "2017-03-22 15:46:35",
          "update_time": null,
          "operator_id": null
        },

        baby: {
        "id": null,
        "custom_id": '',
        "baby_name": '',
        "baby_nickname": null,
        "baby_sex": "MALE###",
        "baby_birthday": '2000-01-01',
        "baby_birthday_str": '2000-01-01',
        "baby_birthday_mark": null,
        "insert_time": null,
        "update_time": null
        },

        babies:[
        ],
        iconType: '',
        addressData : ChinaAddressData,

        address: ['广东省', '深圳市', '南山区'],

        // source_id: '',
        // parent_industry: '',
        // babyGenderValue: '',

        babyGenderOptions: [
        {
          key : 'MALE###',
          value: '男'
        },
        {
          key: 'FEMALE#',
          value: '女'
        }
        ],

        industryOptions : [

        {
          key: 'IT',
          value:'IT软件业'
        },

        {
          key:'hairdressing',
          value:'美容美甲'}
        ],

        clientSources : [

        {
          key: '0',
          value:'来源1'
        },

        {
          key:'1',
          value:'来源2'
        }
        ],

        followStatus : [

        {
          key: 'followed',
          value:'已跟进'
        },

        {
          key:'unfollowed',
          value:'未跟进'}
        ],

        followProperties : [

        {
          key: 0,
          value:'意向客户'
        },

        {
          key:1,
          value:'普通客户'
        }
        ],
      }
    },
    components:{
      XInput,
      Group,
      ChinaAddressData,
      XAddress,
      Selector,
      Datetime,
      Cell
    },
    methods: {
      refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
      },

      log(){
      console.log('ee');
      },

      load (iscroll) {
      console.log('load')
      // Load new data
      },

      test(){
      console.log('test')
      },

      onBlur(){

      },

      onShow(){
      console.log(arguments)
      },

      addBaby(){
      this.babies.push(this.baby);
      },

      //初始化客户信息
      initClientInfo(id){

        if(!this.clientsDetail[id]) {
          store.dispatch('getCustomInfoById', id);
        }

        let client = this.clientsDetail[id];

        this.client = Object.assign(this.client, client);
        this.client.address = [this.client.province, this.client.city, this.client.district];

        this.id = id;

        console.log(JSON.stringify(client), 'client');
      },

      initBabyInfo(id) {

        // store.dispatch('getBabys', id).then(function(response){
        //   if(response.errcode == 0) {
        //     this.babies = response.results;
        //     console.log("store.dispatch('getBabys', id).then(function(response){}", json.stringify(response));
        //   } else {
        //     alert('服务器错误！请联系管理员!');
        //   }
        //   console.log("store.dispatch('getBabys', id).then(function(response){}", json.stringify(response));
        // })

        //测试数据
        // let response  =  {
        //   "errcode": 0,
        //   "errmsg": "接口调用成功!",
        //   "results": [
        //     {
        //     "id": 5,
        //     "custom_id": 1,
        //     "baby_name": "王子",
        //     "baby_nickname": null,
        //     "baby_sex": "MALE###",
        //     "baby_birthday": "2014-01-01",
        //     "baby_birthday_str": null,
        //     "baby_birthday_mark": null,
        //     "insert_time": "2017-03-22 16:29:17",
        //     "update_time": null
        //     },
        //     {
        //     "id": 6,
        //     "custom_id": 1,
        //     "baby_name": "王小小",
        //     "baby_nickname": null,
        //     "baby_sex": "MALE###",
        //     "baby_birthday": "2015-01-01",
        //     "baby_birthday_str": null,
        //     "baby_birthday_mark": null,
        //     "insert_time": "2017-03-22 16:29:17",
        //     "update_time": null
        //     }
        //   ]
        // };
        //
        // if(response.errcode == 0) {
        //   this.babies = response.results;
        //   console.log("store.dispatch('getBabys', id).then(function(response){}", JSON.stringify(response));
        // } else {
        //   alert('服务器错误！请联系管理员!');
        // }
      },

      saveClientInfo(){
        let that = this;
        console.log('www')
        store.dispatch('saveClientInfo', that.client).then(function(aresponse){
        if(aresponse.data.errcode == 0) {
         store.dispatch('saveBabys', that.babies).then(function(response){
          if(response.data.errcode == 0) {
            console.debug('保存成功！');
            that.$route.back();
          } else {
            console.log('保存宝宝信息失败!', JSON.stringify(response.data))
          }
         }).catch((error) =>{
           console.log(error)
         });
        } else {
          console.log('保存客户信息失败!', JSON.stringify(aresponse.data))
        }
        }).catch((error) =>{
        console.log(error)
        });
      }

    },

    mounted() {
      let query =  this.$route.query;
      this.custom_type = query.custom_type;

      this.client.custom_type = this.custom_type == 1 ? 'QT#' : 'WX#';

      this.addBaby();
      this.callJsApi('biz.navigation.setTitle',{title:'新增客户'});
    },

    computed : {

      //包含客户详情的列表
      clientsDetail(){
        return this.$store.state.app.clientsDetail;
      },

      //跟进状态选项列表
      customStatusOptions() {
        return this.$store.state.app.customStatusOptions;
      },

      //客户属性选项列表
      customPropertyOptions() {
        return this.$store.state.app.customPropertyOptions;
      }

    }

  }
</script>

<style lang='less'>
  @import "../less/index.less";

  .normal-client-main{
  .no-margin{
     &>*{
     margin: 0
     }
  }

  .add-new-btn{
    width: 60%;
  }

  .btn-group{
    &:extend(.clearfix all);
    margin-top: 15px;


    &>*{
    width: 38%;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    margin: 0 8px;
    border: 1px solid rgb(229, 229, 229);
    background-color: white;
    color:#23B2E2;
    }

    .pull-left{
    float: left;
    }

    .pull-right{
    float: right;
    }
  }

  .weui-select{
    text-align: right!important;
  }

  }
</style>
